<template>
  <div class="app-container">

    <el-form
      ref="param"
      :inline="true"
      :model="param"
      class="demo-form-inline"
      @submit.native.prevent
    >
      <el-form-item prop="title">
        <el-input v-model="param.title" placeholder="菜单名称" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        <el-button icon="el-icon-delete" @click="onClear('param')">清空</el-button>
        <el-button type="success" icon="el-icon-document-add" @click="add">添加</el-button>
        <el-button type="danger" icon="el-icon-delete-solid" @click="add">删除</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="menuTableRef"
      v-loading="listLoading"
      :data="list"
      row-key="id"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @select-all="selectAll"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        property="title"
        label="菜单名称"
      />
      <el-table-column label="图标">
        <template slot-scope="scope">
          <i :class="scope.row.icon" style="font-size:25px;margin-right:15px" />
          {{ scope.row.icon }}
        </template>
      </el-table-column>
      <el-table-column
        property="component"
        label="组件"
      />
      <el-table-column
        property="path"
        label="路径"
      />
      <el-table-column
        property="sort"
        label="排序"
      />
      <el-table-column
        label="操作"
        width="184"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-view"
            @click="show(scope.$index, scope.row)"
          >
            查看
          </el-button>
          <el-dropdown trigger="click">
            <el-button type="info" size="mini">
              更多<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-share" @click.native="addChildren(scope.$index, scope.row)">添加下级</el-dropdown-item>
              <el-dropdown-item icon="el-icon-edit" @click.native="update(scope.$index, scope.row)">编辑</el-dropdown-item>
              <el-dropdown-item icon="el-icon-delete-solid" @click.native="remove(scope.$index, scope.row)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <br>

    <el-dialog
      title="菜单信息"
      :visible.sync="dialogVisible"
    >
      <p>菜单名称 : {{ menuInfo.title }}</p>
      <p>菜单路径 : {{ menuInfo.path }}</p>
      <p>前端组件 : {{ menuInfo.component }}</p>
      <p v-if="menuInfo.type === 1">菜单类型 : 一级菜单</p>
      <p v-if="menuInfo.type === 2">菜单类型 : 子菜单</p>
      <p>默认跳转地址 : {{ menuInfo.redirect }}</p>
      <p>菜单图标 : <i :class="menuInfo.icon" style="font-size:20px" /> {{ menuInfo.icon }}</p>
      <p>排序 : {{ menuInfo.sort }}</p>
      <p v-if="menuInfo.hidden === true">隐藏路由 : 是</p>
      <p v-if="menuInfo.hidden === false">隐藏路由 : 否</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-drawer
      :title="title"
      :visible.sync="drawerVisible"
      direction="rtl"
      size="45%"
      @closed="drawerClosed"
    >
      <el-card class="box-card">
        <el-form ref="menuForm" :model="menuForm" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-form-item label="菜单类型">
            <el-radio-group v-model="menuType" @change="menuTypeChange">
              <el-radio :label="1">一级菜单</el-radio>
              <el-radio :label="2">子菜单</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="菜单名称" prop="title">
            <el-input v-model="menuForm.title" placeholder="请输入菜单名称" />
          </el-form-item>
          <el-form-item label="菜单路径" prop="path">
            <el-input v-model="menuForm.path" placeholder="请输入菜单路径" />
          </el-form-item>
          <el-form-item label="前端组件" prop="component">
            <el-input v-model="menuForm.component" placeholder="请输入前端组件" />
          </el-form-item>
          <el-form-item v-if="menuType==1" label="默认跳转地址" prop="redirect">
            <el-input v-model="menuForm.redirect" />
          </el-form-item>
          <el-form-item v-if="menuType==2" label="上级菜单" prop="parentId">

            <tree-select
              v-model="menuForm.parentId"
              clearable
              placeholder="请选父级菜单"
              :tree-data="menuTreeData"
              :props="{ children: 'children', label: 'label' }"
              node-key="id"
            />
          </el-form-item>
          <el-form-item label="菜单图标" prop="icon">
            <el-input v-model="menuForm.icon">
              <el-button slot="append" icon="el-icon-s-tools" @click="openSelectIcon" />
            </el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="menuForm.sort" :min="1" />
          </el-form-item>
          <el-form-item label="隐藏路由" prop="hidden">
            <el-switch v-model="menuForm.hidden" />
          </el-form-item>
          <el-form-item>
            <el-button plain @click="resetForm('menuForm')">重置</el-button>
            <el-button @click="cancelMenuForm">取消</el-button>
            <el-button type="primary" @click="submitForm('menuForm')">确定</el-button>
          </el-form-item>
        </el-form>

      </el-card>
    </el-drawer>

    <select-icon ref="selectIconRef" @getSelectValue="getSelectValue" />

  </div>
</template>

<script>
import { findMenuList, findJSONArrayMenuList, findMenuVoById, addOrUpdate, deleteMenuById } from '@/api/menu'
import SelectIcon from '@/components/SelectIcon/index.vue'
import TreeSelect from '@/components/TreeSelect/index.vue'
export default {
  components: {
    TreeSelect,
    SelectIcon
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      param: {
        title: ''
      },
      page: {
        total: 0
      },
      list: [],
      listLoading: true,
      dialogVisible: false,
      drawerVisible: false,
      title: '添加菜单',
      menuType: 1,
      menuTreeData: [],
      parentId: '',
      menuForm: {
        id: '',
        type: 1,
        path: '',
        component: '',
        parentId: '',
        redirect: '',
        icon: '',
        title: '',
        hidden: false,
        sort: 1
      },
      rules: {
        title: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入菜单路径', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '请输入前端组件', trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '请选择父级菜单', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '请输入排序值', trigger: 'change' }
        ]
      },
      menuInfo: {},
      tableSelected: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.listLoading = true
      findMenuList(this.param).then(res => {
        this.list = res.data
        this.listLoading = false
      })
    },
    findMenu() {
      findJSONArrayMenuList().then(res => {
        this.menuTreeData = res.data
      })
    },
    show(index, row) {
      this.menuInfo = row
      this.dialogVisible = true
    },
    addChildren(index, row) {
      console.log(row.id)
      this.findMenu()
      this.drawerVisible = true
      this.$nextTick(() => {
        this.menuType = 2
        this.menuForm.parentId = row.id
      })
    },
    drawerClosed() {
      this.menuType = 1
      this.resetForm('menuForm')
    },
    cancelMenuForm() {
      this.drawerVisible = false
    },
    menuTypeChange(mt) {
      this.menuType = mt
      this.resetForm('menuForm')
      // 手动置空
      if (mt === 1) {
        this.menuForm.parentId = ''
      }
      if (mt === 2) {
        this.menuForm.redirect = ''
      }
    },
    openSelectIcon() {
      this.$refs.selectIconRef.dialogVisible = true
    },
    getSelectValue(selectIconValue) {
      this.menuForm.icon = selectIconValue
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.menuForm.id = ''
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.menuForm.type = this.menuType
          addOrUpdate(this.menuForm).then(res => {
            console.log(res)
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.init()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onSearch() {
      this.param.pageNum = 1
      this.init()
    },
    onClear(formName) {
      this.$refs[formName].resetFields()
    },
    handleSelectionChange() {

    },
    selectAll(selection) {
      if (!this.tableSelected) {
        this.selectedNodes(this.list, true)
      } else {
        this.selectedNodes(this.list, false)
      }
      this.tableSelected = !this.tableSelected
    },
    selectedNodes(nodes, value) {
      nodes.forEach(v => {
        this.$refs.menuTableRef.toggleRowSelection(v, value)
        if (v.children.length > 0) {
          this.selectedNodes(v.children, value)
        }
      })
    },
    add() {
      this.findMenu()
      this.drawerVisible = true
    },
    update(index, row) {
      this.findMenu()
      findMenuVoById({ id: row.id }).then(res => {
        this.drawerVisible = true
        this.$nextTick(() => {
          this.menuType = res.data.type
          this.menuForm.id = res.data.id
          this.menuForm.path = res.data.path
          this.menuForm.component = res.data.component
          this.menuForm.parentId = res.data.parentId
          this.menuForm.redirect = res.data.redirect
          this.menuForm.icon = res.data.icon
          this.menuForm.title = res.data.title
          this.menuForm.hidden = res.data.hidden
          this.menuForm.sort = res.data.sort
        })
      })
    },
    remove(index, row) {
      this.$confirm('此操作将删除该菜单及其子菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenuById({ id: row.id }).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.init()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style>
  .el-dropdown {
    vertical-align: top;
    margin-left: 10px;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
